<template>
	<view class="accountEditPhone form">
		<template v-if="bindPhoneOrNot">
			<!-- 验证当前手机号 -->
			<view class="for">
				<text class="text">当前手机号</text>
				<input
					v-model="currentPhone"
					type="text"
					placeholder=""
					placeholder-class="placeholder-class">
				<text
					v-if="clickCurrentCodeButtonText == '获取验证码'"
					class="button" @click="clickCurrentCodeButton">
					{{clickCurrentCodeButtonText}}
				</text>
				<text
					v-else
					class="button"
					style="background: #303133;">
					{{clickCurrentCodeButtonText}}
				</text>
			</view>
			<view class="for">
				<text class="text">验证码</text>
				<input
					v-model="currentPhoneCode"
					type="text"
					placeholder="请输入验证码"
					placeholder-class="placeholder-class">
				<text
					v-if="clickCurrentCodeText == '验证'"
					class="button"
					@click="clickCurrentCode">
					{{clickCurrentCodeText}}
				</text>
				<text
					v-else
					class="button"
					style="background: #303133;">
					{{clickCurrentCodeText}}
				</text>
			</view>
			<!-- 验证新手机号 -->
			<template v-if="currentPhoneVerificationStatus">
				<view class="for">
					<text class="text">新手机号</text>
					<input
						v-model="newPhone"
						type="text"
						placeholder="请输入新手机号"
						placeholder-class="placeholder-class">
					<text
						v-if="clickNewCodeButtonText == '获取验证码'"
						@click="clickNewCodeButton"
						class="button">{{clickNewCodeButtonText}}</text>
					<text
						v-else
						style="background: #303133;"
						class="button">{{clickNewCodeButtonText}}</text>
				</view>
				<view class="for">
					<text class="text">验证码</text>
					<input
						v-model="newPhoneCode"
						type="text"
						placeholder="请输入验证码"
						placeholder-class="placeholder-class">
				</view>
				<view
					@click="clickSubmitButton"
					class="submit-button">修改</view>
			</template>
		</template>
		<template v-if="!bindPhoneOrNot">
			<view class="for">
				<text class="text">新手机号</text>
				<input
					v-model="combinePhone"
					type="text"
					placeholder="请输入新手机号"
					placeholder-class="placeholder-class">
				<text
					v-if="combinePhoneButtonText == '获取验证码'"
					@click="clickCombineCodeButton"
					class="button">{{combinePhoneButtonText}}</text>
				<text
					v-else
					style="background: #303133;"
					class="button">{{combinePhoneButtonText}}</text>
			</view>
			<view class="for">
				<text class="text">验证码</text>
				<input
					v-model="combinePhoneCode"
					type="text"
					placeholder="请输入验证码"
					placeholder-class="placeholder-class">
			</view>
			<view
				@click="clickCombineSubmitButton"
				class="submit-button">绑定</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bindPhoneOrNot:false,//是否绑定了手机号
				currentPhoneVerificationStatus:false,//当前手机号验证状态
				currentPhone:"",//当前手机号
				currentPhoneCode:"",//当前手机号验证码
				newPhone:"",//新手机号
				newPhoneCode:"",//新手机号验证码
				clickCurrentCodeButtonText:"获取验证码",
				clickCurrentCodeText:"验证",
				clickNewCodeButtonText:"获取验证码",
				clickNewCodeText:"验证",
				combinePhone:"",
				combinePhoneButtonText:"获取验证码",
				combinePhoneCode:""
			}
		},
		onLoad() {
			// 获取账号基本信息
			this.getAccountDetail();
		},
		methods: {
			// 获取账号基本信息
			getAccountDetail(){
				this.$_Request(
					"GET","/api/v2/account/detail",{},
					(res) => {
						this.currentPhone = res.data.data.detail.phone;
						// 如果绑定了手机号，改变手机号绑定状态
						if(this.currentPhone){
							this.bindPhoneOrNot = true;
							uni.setNavigationBarTitle({ title: '修改手机号' })
						}else{
							uni.setNavigationBarTitle({ title: '绑定手机号' })
						}
					}
				)
			},
			// 点击，当前获取验证码按钮
			clickCurrentCodeButton(){
				uni.showLoading();
				this.$_Request(
					"POST","/api/v2/common/send-verify-code",
					{
						"type":"sms",
						"useType":4,
						"templateId":4,
						"countryCode":86
					},
					(res) => {
						uni.hideLoading()
						if(res.data.code == 0){
							if(this.clickCurrentCodeButtonText == '获取验证码'){
								this.clickCurrentCodeButtonText = 300;
								this.s = setInterval(() => {
									this.clickCurrentCodeButtonText -= 1;
									if(this.clickCurrentCodeButtonText == 0){
										clearInterval(this.s)
										this.clickCurrentCodeButtonText = 300;
									}
								}, 1000);
							}
						}else{
							uni.showToast({
								title: res.data.message,
								icon:'none'
							});
						}
					}
				)
			},
			// 点击，验证当前验证码按钮
			clickCurrentCode(){
				uni.showLoading();
				this.$_Request(
					"POST","/api/v2/account/verify-identity",
					{
						"type":"sms",
						"verifyCode":this.currentPhoneCode
					},
					(res) => {
						uni.hideLoading()
						if(res.data.code == 0){
							this.clickCurrentCodeText = "已验证";
							this.currentPhoneVerificationStatus = true;
						}else{
							uni.showToast({
								title: res.data.message,
								icon:'none'
							});
						}
					}
				)
			},
			// 点击，获取新手机号验证码
			clickNewCodeButton(){
				uni.showLoading();
				this.$_Request(
					"POST","/api/v2/common/send-verify-code",
					{
						"type":"sms",
						"useType":1,
						"templateId":3,
						"account":this.newPhone,
						"countryCode":86
					},
					(res) => {
						uni.hideLoading()
						if(res.data.code == 0){
							if(this.clickNewCodeButtonText == '获取验证码'){
								this.clickNewCodeButtonText = 300;
								this.s = setInterval(() => {
									this.clickNewCodeButtonText -= 1;
									if(this.clickNewCodeButtonText == 0){
										clearInterval(this.s)
										this.clickNewCodeButtonText = 300;
									}
								}, 1000);
							}
						}else{
							uni.showToast({
								title: res.data.message,
								icon:'none'
							});
						}
					}
				)
			},
			// 最后提交修改
			clickSubmitButton(){
				uni.showLoading();
				this.$_Request(
					"PUT","/api/v2/account/edit",
					{
						"codeType": "sms",
						"verifyCode": this.currentPhoneCode,
						"newPhone": this.newPhone,
						"newVerifyCode": this.newPhoneCode,
						"newCountryCode":86
					},
					(res) => {
						uni.hideLoading()
						if(res.data.code == 0){
							uni.navigateBack();
						}else{
							uni.showToast({
								title: res.data.message,
								icon:'none'
							});
						}
					}
				)
			},
			// 绑定手机号，获取验证码
			clickCombineCodeButton(){
				uni.showLoading();
				this.$_Request(
					"POST","/api/v2/common/send-verify-code",
					{
						"type":"sms",
						"useType":3,
						"templateId":4,
						"account":this.combinePhone,
						"countryCode":86
					},
					(res) => {
						uni.hideLoading()
						if(res.data.code == 0){
							if(this.combinePhoneButtonText == '获取验证码'){
								this.combinePhoneButtonText = 300;
								this.s = setInterval(() => {
									this.combinePhoneButtonText -= 1;
									if(this.combinePhoneButtonText == 0){
										clearInterval(this.s)
										this.combinePhoneButtonText = 300;
									}
								}, 1000);
							}
						}else{
							uni.showToast({
								title: res.data.message,
								icon:'none'
							});
						}
					}
				)
			},
			//最后提交绑定
			clickCombineSubmitButton(){
				uni.showLoading();
				this.$_Request(
					"PUT","/api/v2/account/edit",
					{
						"codeType": "sms",
						"newPhone": this.combinePhone,
						"newCountryCode":86,
						"newVerifyCode": this.combinePhoneCode,
					},
					(res) => {
						uni.hideLoading()
						if(res.data.code == 0){
							uni.navigateBack();
						}else{
							uni.showToast({
								title: res.data.message,
								icon:'none'
							});
						}
					}
				)
			},
		}
	}
</script>

<style lang="scss">
.form{
	.for{
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid $BianKuangSe;
		line-height: 28rpx;
		font-size: 28rpx;
		margin: 25rpx;
		padding-bottom: 25rpx;
		.text{
			font-size: 28rpx;
			color: $ZhanWeiSe;
			margin-right: 15rpx;
		}
		input{
			flex: 1;
			font-size: 28rpx;
		}
		.placeholder-class{
			color: $ZhanWeiSe;
			font-size: 28rpx;
		}
		.button{
			margin-left: 15rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 22rpx;
			line-height: 22rpx;
			background: $LanSe;
			color: #FFF;
			padding: 15rpx;
			border-radius: 10rpx;
		}
	}
	.submit-button{
		width: 200rpx;
		height: 80rpx;
		line-height: 28rpx;
		font-size: 28rpx;
		background: $LanSe;
		color: #FFF;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
	}
}
</style>
